<template>
  <div class="warrantyQuery">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="查询结果"
      left-text
      right-text="保修规则"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="header"
    ></van-nav-bar>

    <div class="section">
      <div class="phone_image">
        <van-image class="phone" :src="require('@/assets/img/goodsDetail/phone.png')" />
      </div>
      <!-- 在保 -->
      <div class="warranty_info" v-if="queryResults === 1">
        <h1 class="warranty_title">在保{{goods.warranty.warranty_day}}天</h1>
        <van-image class="warranty_icon" :src="require('@/assets/img/goodsDetail/baoxiu.png')" />
      </div>
      <!-- 不在保 -->
      <div class="warranty_info" v-else-if="queryResults === 2">
        <h1 class="warranty_title">已过保</h1>
        <van-image class="warranty_icon" :src="require('@/assets/img/goodsDetail/baoxiu.png')" />
      </div>
      <!-- 没结果 -->
      <div class="warranty_info" v-else-if="queryResults === 0">
        <h1 class="warranty_title_none">平台无记录</h1>
      </div>

      <!-- 在保 -->
      <div class="warranty_detail" v-if="queryResults === 1">
        <p>维修和服务保障情况：未过期</p>
        <p>我们的记录显示，根据预计到期日您的产品还可以</p>
        <p>享受100天的非人为损坏质保</p>
      </div>
      <!-- 不在保 -->
      <div class="warranty_detail" v-else-if="queryResults === 2">
        <p>维修和服务保障情况：未过期</p>
        <p>我们的记录显示，根据预计到期日您的产品还可以</p>
        <p>享受0天的非人为损坏质保</p>
      </div>
      <!-- 没结果 -->
      <div class="warranty_detail" v-else-if="queryResults === 0">
        <p>维修和服务保障情况：平台无记录</p>
        <p>我们的记录显示，该机器不是一品数码会平台所出</p>
        <p>售的物品</p>
      </div>

      <!-- 在保 || 不在保 -->
      <div class="warranty_detail_info" v-if="queryResults === 1 || queryResults === 2">
        <div class="detail_info_top">
          <span class="detail_info_grade">{{goods.goods_class}}</span>
          <h3 class="detail_info_title">{{goods.title}}</h3>
        </div>
        <p class="detail_info_code">物品IMEI码：{{goods.imei}}</p>
        <p class="detail_info_code">购买时间：{{goods.sold_out_time}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Image } from "Vant";
export default {
  name: "warrantyQuery",
  data() {
    return {
      imei: "",
      queryResults: 0,
      goods: {

      }
    };
  },
  created() {
    this.imei = this.$route.query.imei;
    this.getWarrantyQuery()
  },
  methods: {
    // 保修查询
    getWarrantyQuery() {
      this.$axios.get(`/api/index/warrantyQuery?imei=${this.imei}`).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.queryResults = 0
        }
        if (res.data.code === 1 && res.data.data.warranty.status === '10') {
          this.queryResults = 1
          this.goods = res.data.data
        }
        else if (res.data.code === 1 && res.data.data.warranty.status === '20') {
          this.queryResults = 2
          this.goods = res.data.data
        }
      })
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      console.log("按钮");
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.warrantyQuery {
  width: 100%;
  min-height: 1333px;
  padding-bottom: 171px;
  background: rgba(255, 255, 255, 1);
  .header {
    @{deep} .van-nav-bar__left,
    .van-nav-bar__right {
      .van-nav-bar__text {
        font-size: 15px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
    @{deep} .van-icon {
      font-size: 16px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    @{deep} .van-nav-bar__title {
      font-size: 18px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
  }
  .section {
    width: 100%;
    padding: 0 30px;
    .phone_image {
      width: 80px;
      height: 159px;
      margin: 0 auto;
      margin-top: 112px;
      .phone {
        width: 80px;
        height: 159px;
        background: rgba(80, 81, 94, 1);
        border-radius: 6px;
        margin: 0 auto;
      }
    }
    .warranty_info {
      width: 250px;
      height: 37px;
      margin: 0 auto;
      margin-top: 46px;
      text-align: center;
      .warranty_title {
        float: left;
        height: 37px;
        font-size: 38px;
        font-family: PingFang SC;
        font-weight: bold;
        margin-right: 15px;
        color: rgba(51, 51, 51, 1);
      }
      .warranty_title_none {
        float: left;
        width: 100%;
        height: 37px;
        text-align: center;
        font-size: 38px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
      .warranty_icon {
        float: left;
        width: 38px;
        height: 38px;
        background: rgba(0, 0, 0, 1);
      }
    }
    .warranty_detail {
      width: 100%;
      margin-top: 55px;
      padding: 39px 30px;
      height: 190px;
      background: rgba(255, 240, 240, 1);
      border-radius: 9px;
      p {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 59, 62, 1);
        line-height: 38px;
      }
    }
    .warranty_detail_info {
      width: 100%;
      height: 230px;
      padding: 38px 0;
      border-bottom: 1px solid rgba(193, 193, 193, 1);
      .detail_info_top {
        height: 42px;
        .detail_info_grade {
          float: left;
          width: 80px;
          height: 42px;
          text-align: center;
          line-height: 42px;
          // background:linear-gradient(0deg,rgba(255,127,63,0.83));
          border-radius: 21px;
          background-color: #ff3b3e;
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
        .detail_info_title {
          float: left;
          height: 30px;
          font-size: 30px;
          margin-left: 19px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          line-height: 48px;
        }
      }
      .detail_info_code {
        height: 23px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(136, 136, 136, 1);
        margin-top: 30px;
      }
    }
  }
}
</style>
